import './commomdetails.scss'
import React, { useEffect } from 'react';
import { Form, Input, Button, Upload, Select } from 'antd'
import { CloseOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
// 地图组件
import BuildingMap from '../../Building_information_management/BuildingMap/BuildingMap';
import ziyuan from '../../../static/images/ziyuanzhanshi.png'
import huxing from '../../../static/images/huxingtu.png'
import store from '../../../store/index'
import http from '../../../utils/http';
export const CommomDetails = (props) => {
    useEffect(() => {
        console.log(store.zhangxi.CommonDetails.annId, 'id');

        http({
            url: "/announcement/findAnnouncementInfo",
            method: "post",
            params: {
                annId: store.zhangxi.CommonDetails.annId
            }
        }).then((res) => {
            console.log(res);
            if (res.code === 200) {
                form.setFieldsValue(res.data[0])
            }
        })
    }, [])
    // 下拉框
    const { Option } = Select;

    // 监听浏览器 回退没有
    window.onpopstate = function (event) {
        if (event.state !== null) {
            props.setIsCommomDetails(false)
        }
    }

    let usenavigate = useNavigate()
    console.log(props);

    // 表单
    const [form] = Form.useForm();


    // 文本框
    const { TextArea } = Input;
    // 返回父级
    const commomReturn = () => {
        props.setIsCommomSpace(false)
        usenavigate('/home/Operate/CommonResourceManagement')
    }
    return (
        <div className='resourceDetails_box'>
            {/* 顶层样式 */}
            <div className='resourceDetails_top'>
                <div className='resourceDetails_kuai'>
                    <span></span>
                    <span>共公资源详情</span>
                </div>
                <div className='resourceDetails_signout'>
                    <CloseOutlined onClick={commomReturn} style={{ fontSize: 20, cursor: " pointer" }} />
                </div>
            </div>

            {/* 表单 */}
            <div className='commombiao'>
                {/* 上 */}
                <div style={{ display: "flex" }}>
                    {/* 左边文字 */}
                    <div className='resourceDetails_biao_left'>
                        <h2>公共资源信息</h2>
                    </div>
                    {/* 右边内容 */}
                    <div className='resourceDetails_biao_right'>
                        {/* 左边表单 */}
                        <div className='resourceDetails_biao_childleft'>
                            <Form
                                name="basic"
                                labelCol={{ span: 3 }}
                                wrapperCol={{ span: 22 }}
                                initialValues={{ remember: true }}
                                autoComplete="off"
                                form={form}
                            >
                                {/* 资源名称 */}
                                <Form.Item
                                    label="资源名称"
                                    name="annName"
                                    rules={[{ required: true, message: '请输入资源名称!' }]}
                                >
                                    <Input placeholder="请输入资源名称" />
                                </Form.Item>

                                <div style={{
                                    display: "flex"
                                }}>
                                    {/* 出租单价 */}
                                    <Form.Item
                                        label="出租单价"
                                        name="annMoney"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入出租单价!' }]}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <Input placeholder="请输入出租单价" />
                                    </Form.Item>

                                    {/* 资源面积 */}
                                    <Form.Item
                                        label="资源面积"
                                        name="annArea"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入资源面积!' }]}
                                        style={{
                                            flex: '1',
                                        }}

                                    >
                                        <Input placeholder="请输入资源面积" />
                                    </Form.Item>
                                </div>



                                <div style={{
                                    display: "flex"
                                }}>
                                    {/* 资源类型 */}
                                    <Form.Item
                                        label="资源类型"
                                        name="annType"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入资源类型!' }]}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <Input placeholder="请输入资源类型" />
                                    </Form.Item>

                                    {/* 容纳人数 */}
                                    <Form.Item
                                        label="容纳人数"
                                        name="annNum"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入在容纳人数!' }]}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <Input placeholder="请输入在容纳人数" />
                                    </Form.Item>
                                </div>

                                <div style={{
                                    display: "flex"
                                }}>
                                    {/* 所属楼宇 */}
                                    <Form.Item
                                        label="所属楼宇"
                                        name="tenSerialint"
                                        rules={[{ required: true, message: '请输入房间名称!' }]}
                                        labelCol={{ span: 6 }}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <Input />
                                    </Form.Item>


                                    {/* 房间名称 */}
                                    <Form.Item label="房间名称"
                                        name="roomNo"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入房间名称!' }]}
                                        style={{
                                            flex: '1',
                                        }}>
                                        <Input placeholder="请输入房间名称" />
                                    </Form.Item>
                                </div>
                            </Form>
                        </div>
                        {/* 右边地图 */}
                        <div className='resourceDetails_biao_childright'>
                            <BuildingMap tenWher={store.zhangxi.CommonDetails.annWhere} />
                        </div>
                    </div>
                </div>

                {/* 下 */}
                <div style={{ display: "flex", marginTop: "25px" }}>
                    {/* 左边文字 */}
                    <div className='resourceDetails_biao_left'>
                        <h2 style={{ lineHeight: "40px" }}>展示图以及面积</h2>
                    </div>
                    {/* 右边内容 */}
                    <div className='resourceDetails_biao_right' style={{ padding: "1.5% 1%" }}>
                        {/* 左边表单 */}
                        <div className='resourceDetails_biao_childleft'>
                            <Form
                                name="basic"
                                labelCol={{ span: 3 }}
                                wrapperCol={{ span: 22 }}
                                initialValues={{ remember: true }}
                                autoComplete="off"
                                form={form}
                            >
                                {/* 房间层高 */}
                                <Form.Item
                                    label="房间层高"
                                    name="roomHigh"
                                    rules={[{ required: true, message: '请输入房间层高!' }]}
                                >
                                    <Input placeholder="请输入房间层高" />
                                </Form.Item>

                                {/* 展示图 */}
                                <div className='displayDiagram'>
                                    <div>
                                        <span> <span style={{ color: "red" }}>*</span> 资源展示图</span>
                                        <img src={ziyuan}></img>
                                    </div>
                                    <div>
                                        <span><span style={{ color: "red" }}>*</span>户型图</span>
                                        <img src={huxing}></img>
                                    </div>
                                </div>






                            </Form>

                        </div>
                        {/* 右边地图 */}
                        <div className='resourceDetails_biao_childright'>


                        </div>
                    </div>
                </div>



                {/* 保存取消 */}
                <div className='resourceDetails_button_two'>
                    <Button type="primary"
                        onClick={
                            () => {
                                props.setIsCommomSpace(false)
                                usenavigate('/home/Operate/CommonResourceManagement')
                            }
                        }>
                        确定
                    </Button>


                </div>
            </div>
        </div>
    )
}

export default CommomDetails